<template>
  <KView class="coupon-tao-detail">
    <template v-if="couponDetail!==null">
      <KView class="coupon-tao-detail-content">
        <KView class="coupon-tao-detail-pic">
          <img class="sys-img" :src="couponDetail.pic" mode="widthFix">
        </KView>
        <KView class="coupon-tao-detail-info">
          <KView class="detail-info-div clearfix">
            <KView class="detail-info-couponPric clearfix">
              <KView class="detail-info-couponPric-label">券后价：</KView>
              <KView class="detail-info-couponPric-unit">¥</KView>
              <KView class="detail-info-couponPric-value">{{couponDetail.couponPrice}}</KView>
            </KView>
            <KView class="detail-info-price">原价：{{couponDetail.price}}</KView>

            <KView class="detail-info-count">已售{{couponDetail.count}}件</KView>
          </KView>
          <KView class="detail-info-name">{{couponDetail.title}}</KView>
          <KView class="detail-info-coupon clearfix">
            <KView class="detail-info-coupon-div clearfix">
              <KView class="detail-info-coupon-icon">
                <sys-svg name="coupon" color="#ffffff"></sys-svg>
              </KView>
              <KView class="detail-info-coupon-text">{{couponDetail.money}}元优惠券</KView>
            </KView>
          </KView>
        </KView>

        <KView class="coupon-tao-detail-line"></KView>
        <KView class="coupon-tao-detail-desc">
          <KView class="coupon-tao-detail-title">使用说明</KView>
          <KView class="coupon-tao-detail-inner-line"></KView>
          <KView class="coupon-tao-detail-desc-text-div">
            <KView class="coupon-tao-detail-explain">
              <KView>1.本商品可领取{{couponDetail.money}}元优惠券；</KView>
              <KView>2.优惠券有效开始时间：{{$moment(couponDetail.couponStartTime).format('YYYY-MM-DD HH:mm:ss')}}；</KView>
              <KView>3.优惠券有效结束时间：{{$moment(couponDetail.couponEndTime).format('YYYY-MM-DD HH:mm:ss')}}；</KView>
              <KView>4.活动开始时间：{{$moment(couponDetail.activityStartTime).format('YYYY-MM-DD HH:mm:ss')}}；</KView>
              <KView>5.活动结束时间：{{$moment(couponDetail.activityEndTime).format('YYYY-MM-DD HH:mm:ss')}}。</KView>
            </KView>
          </KView>
        </KView>

        <KView class="coupon-tao-detail-line"></KView>
        <KView class="coupon-tao-detail-desc">
          <KView class="coupon-tao-detail-title">产品详情</KView>
          <KView class="coupon-tao-detail-inner-line"></KView>
          <KView class="coupon-tao-detail-desc-text-div">
            <KView class="coupon-tao-detail-desc-img" v-if="couponDetail.couponDescPic!==''">
              <img class="sys-img" :src="couponDetail.couponDescPic" mode="widthFix">
            </KView>
            <KView class="coupon-tao-detail-desc-explain">{{couponDetail.couponDescText}}</KView>
          </KView>
        </KView>
      </KView>
      <KView class="coupon-tao-detail-btn" @click="receiveCoupon">领券购买</KView>
    </template>

    <sys-dialog is-centre :visible.sync="openDialog" :close-on-click-modal="false" :width="460" @closed="dialogClosed">
      <template slot-scope="scope">
        <coupon-pwd v-if="scope.isShow" :pwd="couponPwd" @close-dialog="closeDialog"></coupon-pwd>
      </template>
    </sys-dialog>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';
  import CouponApi from 'services/couponApi';

  import SysSvg from 'common/sysSvg';
  import SysDialog from 'common/sysDialog';
  import CouponPwd from './couponPwd';

  export default {
    data() {
      return {
        couponDetail: null,
        couponPwd: null,
        openDialog: false
      };
    },

    created() {
      this.setCouponDetail();
    },

    methods: {
      setCouponDetail() {
        let id = this.$route.params.id;

        SystemUtil.showLoading();
        CouponApi.getTaoCouponDetail(id).then(couponDetail => {
          this.couponDetail = couponDetail;
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      receiveCoupon() {

        let couponDetail = this.couponDetail;
        SystemUtil.showLoading('')
        CouponApi.getTaoPassword(couponDetail).then(pwd => {
          this.openDialog = true;
          this.couponPwd = pwd;
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      closeDialog() {
        this.openDialog = false;
      },

      dialogClosed() {
        this.couponPwd = null;
      }
    },

    components: {
      SysSvg,
      SysDialog,
      CouponPwd
    }
  };

</script>

<style lang="scss">
  .coupon-tao-detail {
    height: 100%;

    .coupon-tao-detail-line {
      height: formatPx(16);
      background: #f2f2f2;
    }

    .coupon-tao-detail-inner-line {
      height: 1px;
      background: #f2f2f2;
    }

    .coupon-tao-detail-title {
      border-left: formatPx(10) solid #59C264;
      font-size: formatPx(36);
      padding-left: formatPx(15);
      line-height: formatPx(40);
      height: formatPx(40);
    }

    .coupon-tao-detail-content {
      height: calc(100% - #{formatPx(120)});
      overflow: auto;

      .coupon-tao-detail-pic {
        height: formatPx(750);
      }

      .coupon-tao-detail-info {
        margin-top: formatPx(30);
        padding: 0 formatPx(30);
        margin-bottom: formatPx(40);

        .detail-info-div {
          height: formatPx(50);
          margin-bottom: formatPx(20);

          .detail-info-couponPric {
            float: left;
            height: 100%;
            margin-right: formatPx(36);

            >div {
              float: left;
              height: 100%;
            }

            .detail-info-couponPric-label {
              color: #b3b9c2;
              line-height: formatPx(60);
              font-size: formatPx(24);
            }

            .detail-info-couponPric-unit {
              color: #ff641f;
              line-height: formatPx(60);
              font-size: formatPx(32);
            }

            .detail-info-couponPric-value {
              color: #ff641f;
              line-height: formatPx(54);
              font-size: formatPx(40);
              margin-left: formatPx(6);
            }
          }

          .detail-info-price {
            float: left;
            height: 100%;
            color: #b3b9c2;
            line-height: formatPx(60);
            font-size: formatPx(24);
            text-decoration: line-through;
          }

          .detail-info-count {
            float: right;
            height: 100%;
            line-height: formatPx(50);
            color: #b3b9c2;
            font-size: formatPx(26);
          }
        }

        .detail-info-name {
          font-size: formatPx(36);
          line-height: formatPx(46);
          color: #2f3135;
          display: box;
          display: -webkit-box;
          line-clamp: 2;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          max-height: formatPx(92);
          overflow: hidden;
          margin-bottom: formatPx(20);
        }

        .detail-info-coupon {
          height: formatPx(46);

          .detail-info-coupon-div {
            float: left;
            height: 100%;
            background: #59c264;
            border-radius: formatPx(23);
            color: #ffffff;
            padding: 0 formatPx(20);

            >div {
              float: left;
              height: 100%;
            }

            .detail-info-coupon-icon {
              width: formatPx(28);
              margin-right: formatPx(10);
            }

            .detail-info-coupon-text {
              line-height: formatPx(46);
              font-size: formatPx(22);
            }
          }
        }
      }

      .coupon-tao-detail-desc {
        margin-top: formatPx(46);
        padding: 0 formatPx(30);
        margin-bottom: formatPx(42);

        .coupon-tao-detail-title {
          margin-bottom: formatPx(30);
        }

        .coupon-tao-detail-desc-text-div {
          margin-top: formatPx(30);

          .coupon-tao-detail-explain {
            font-size: formatPx(26);
          }

          .coupon-tao-detail-desc-img {
            margin-bottom: formatPx(20);
          }

          .coupon-tao-detail-desc-explain {
            font-size: formatPx(34);
          }
        }
      }
    }

    .coupon-tao-detail-btn {
      height: formatPx(76);
      line-height: formatPx(76);
      margin: formatPx(20) formatPx(30) 0;
      background: #59c264;
      color: #ffffff;
      text-align: center;
      font-size: formatPx(28);
      border-radius: formatPx(38);
    }
  }

</style>
